<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('描述列表')}`">{{ $t('描述列表') }}</t>
            <li>将表单控件都设为<span class="d-code">label</span>可以使表单展示为描述列表</li>
            <li>配置<span class="d-code">disabled</span>可以隐藏按钮组</li>
        </template>
        <sib-form disabled :row-field-size="4" :fields="fields" :form="form"></sib-form>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const form = reactive({
            account: '摸鱼阿三',
            name: '张三',
            hobby: '摸鱼、带薪拉屎',
            date: '2023-03-15',
            place: '红土大陆',
            acount: '6',
            mobile: '188****8888',
            idCode: '440321********4521',
            education: '硕士',
        });
        const fields = ref([
            {
                label: '账号',
                code: 'account',
                type: 'label',
            },
            {
                label: '姓名',
                code: 'name',
                type: 'label',
            },
            {
                label: '兴趣爱好',
                code: 'hobby',
                type: 'label',
            },
            {
                label: '出生日期',
                code: 'date',
                type: 'label',
            },
            {
                label: '出生地点',
                code: 'place',
                type: 'label',
            },
            {
                label: '家庭人口数',
                code: 'acount',
                type: 'label',
            },
            {
                label: '手机号码',
                code: 'mobile',
                type: 'label',
            },
            {
                label: '身份证号码',
                code: 'idCode',
                type: 'label',
            },
            {
                label: '学历',
                code: 'education',
                type: 'label',
            },
        ]);

        return {
            fields,
            form,
            templateString: `<template>
    <sib-form disabled :row-field-size="4" :fields="fields" :form="form"></sib-form>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const form = reactive({
            account: '摸鱼阿三',
            name: '张三',
            hobby: '摸鱼、带薪拉屎',
            date: '2023-03-15',
            place: '红土大陆',
            acount: '6',
            mobile: '188****8888',
            idCode: '440321********4521',
            education: '硕士',
        });
        
        const fields = ref([
            {
                label: '账号',
                code: 'account',
                type: 'label',
            },
            {
                label: '姓名',
                code: 'name',
                type: 'label',
            },
            {
                label: '兴趣爱好',
                code: 'hobby',
                type: 'label',
            },
            {
                label: '出生日期',
                code: 'date',
                type: 'label',
            },
            {
                label: '出生地点',
                code: 'place',
                type: 'label',
            },
            {
                label: '家庭人口数',
                code: 'acount',
                type: 'label',
            },
            {
                label: '手机号码',
                code: 'mobile',
                type: 'label',
            },
            {
                label: '身份证号码',
                code: 'idCode',
                type: 'label',
            },
            {
                label: '学历',
                code: 'education',
                type: 'label',
            },
        ]);

        return { fields, form };
    },
};
<\/script>`,
        };
    },
};
</script>
